<template>
  <div id="member">
    <el-col :span="24" class="action-bar">
      <el-button type="primary" size="medium" @click="setMeal('')">添加</el-button>
    </el-col>


    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="套餐名称"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="keep_time"
        label="收费周期(月)"
        width="100"
      >
      </el-table-column>

      <el-table-column
        prop="free"
        label="价格"
        width="100"
      >
      </el-table-column>
      <!-- <el-table-column
          prop="clinch_num"
          label="成交量"
          width="100"
          >
      </el-table-column> -->
      <el-table-column
        prop="is_use"
        label="用户使用中"
        width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-tag type="info" v-show="scope.row.is_use==0">否</el-tag>
            <el-tag type="success" v-show="scope.row.is_use==1">是</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="套餐状态"
        width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-switch
              style="display: block;margin:20px 0;width:200px"
              v-model="scope.row.status"
              @change="switchShowStatus($event,scope)"
              active-color="#13ce66"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>

      <el-table-column label="操作" width='300'>
        <template slot-scope="scope">
          <el-button size="mini" type='primary' @click="setMeal(scope.row.id)">编辑</el-button>
          <el-button size="mini" type='danger' @click="deleteMealt(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="设置套餐" :visible.sync="signatureVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="套餐名称">
          <el-input palceholder="套餐名称" v-model="member.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="用户权益">
          <el-checkbox-group v-model="member.vip_rule_ids">
            <el-checkbox v-for="(item,index) of vipRuleList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="收费周期">
          <el-radio-group v-model="member.cycle">
            <el-radio :label="1">1个月</el-radio>
            <el-radio :label="3">3个月</el-radio>
            <el-radio :label="12">12个月</el-radio>
            <el-radio :label="-1">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义周期" v-if="member.cycle==-1">
          <el-input type="number" palceholder="输入月份" v-model="member.customizeCycle" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input palceholder="输入价格，单位元" v-model="member.price" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input palceholder="数字越小，越靠前" v-model="member.sortNum" style="width:200px"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        signatureVisible: false,//编辑弹窗
        mealId: '',//选中id
        tableData: [{status: true}],
        vipRuleList: '',//用户权益
        page: 1,
        totalPage: 0,
        member: {
          name: '',
          cycle: '',//月份
          customizeCycle: '',//自定义月份
          price: '',
          sortNum: '',
          vip_rule_ids: [],//权益
        },
        photoImg: '',
        photoID: '',
      }
    },
    methods: {
      async changeAgreementStatus() {
        let res = await this.$api.changeAgreementStatus()
        if (res.data.level == 'success') {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getVipPackageList();
      },
      async getVipPackageList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: 16,
        }
        let res = await this.$api.getVipPackageList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
      },
      async deleteMealt(id) {
        //删除套餐
        let judge = null;
        let tit = '删除该套餐?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delVipPackage(id)
        }
        console.log(judge)
      },
      async delVipPackage(id) {
        let res = await this.$api.delVipPackage({id: id})
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getVipPackageList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      async getVipRuleList() {
        //获取用户权益
        let res = await this.$api.getVipRuleList();
        if (res.data.level == 'success') {
          this.vipRuleList = res.data.data;
        }
      },
      async submit() {
        // let vip_rule_ids = []
        // vip_rule_ids.push(this.member.vip_rule_ids)

        let params = {
          id: this.mealId,
          name: this.member.name,
          keep_time: this.member.cycle == -1 ? this.member.customizeCycle : this.member.cycle,
          free: this.member.price,
          sort: this.member.sortNum,
          vip_rule_ids: this.member.vip_rule_ids
        }
        let res = await this.$api.setVipPackage(params)
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getVipPackageList()
          this.signatureVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })

        }
      },
      setMeal(id) {
        //获取套餐详情
        if (id) {
          this.mealId = id;
          this.getVipPackageDetail(id)
        }
        this.signatureVisible = true;


      },
      async getVipPackageDetail(id) {
        let res = await this.$api.getVipPackageDetail({id: id})
        if (res.data.level == 'success') {
          let data = res.data.data
          this.member.name = data.name;
          this.member.price = data.free;
          this.member.sortNum = data.sort;

          if (data.keep_time != 1 && data.keep_time != 3 && data.keep_time != 12) {//区分套餐的收费周期是自定义还是选中的
            this.member.cycle = -1;
            this.member.customizeCycle = data.keep_time
          } else {
            this.member.cycle = +data.keep_time
          }
          // let vipRuleList = []
          data.vip_rule_list.forEach(item => {
            if (item.is_have==1){
              this.member.vip_rule_ids.push(item.id)
            }
          })
          // this.vipRuleList = vipRuleList
        } else {
          this.$message.error(res.data.message)
        }
      },
      beforeAvatarUpload(file) {
        //上传照片前的操作
        // console.log(file,555)
      },
      handlePhoto(res, file) {
        //上传照片成功
        if (res.data) {
          this.photoImg = res.data.img_url;
          this.photoId = res.data.id;
        }
      },
      async switchShowStatus($event, scope) {
        let params = {
          id: scope.row.id
        }
        let res = await this.$api.changeVipPackageStatus(params)
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })

        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
          let is_show = $event == '1' ? '0' : '1'
          this.$set(this.tableData, scope.$index, {...scope.row, ...{is_show: is_show}})

        }
      },
      toBandCompany(id) {
        //绑定会员单位
        this.$router.push({name: 'Meal_bind', query: {id: id}})
      },

      initData() {
        this.mealId = '';
        this.member = this.$options.data().member
        this.getVipRuleList()
      }

    },
    mounted() {
      this.getVipPackageList()
      this.getVipRuleList()
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar {
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }

  .add-table-wrapper {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }
</style>
